<template>
  <div class="item">
      <div class="short">
          <span style="padding-left: 30px;">{{ `https://cxkqun.xyz/${short.short_code}` }}</span>
      </div>
      <div class="createtime">{{ short.createtime }}</div>
      <div class="active">
          <Button type="button" icon="pi pi-times" severity="danger" @click="deleteshort(short)"  />
      </div>
  </div>
</template>

<script setup>
import Button from 'primevue/button';
import { defineProps, inject } from 'vue'

// 从祖先组件中注入函数
const deleteshort = inject('deleteshort');

// 定义 props
const props = defineProps({
  short:Object
})

</script>

<style scoped lang="less"> 
  .item{
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 14px;
      border-bottom: 1px solid #e2e8f0;

      &:hover{
          background-color: #f8fafc;
      }

      &>*{
          flex: 1;
          height: 50px;
          line-height: 50px;
          padding-left: 10px;
      }
      &>.active{
          display: flex;
          align-items: center;
      }
      &>.short{
          display: flex;
          align-items: center;
      }
  }
</style>